<template>
  <div class="hero-view">
    <BaseBox>
      <template #title>
        <BaseTitle>英雄百科</BaseTitle>
      </template>
      <template>
        <!-- 筛选盒子 -->
        <ul class="filter-box">
          <!-- 免费区域 -->
          <li class="free-box">
            <BaseTabs v-model="freeType" :tabs="freeTabs" />
          </li>
          <li>
            <!-- 定位区域 -->
            <div class="tab-box">
              <BaseTabs v-model="heroType" :tabs="typeTabs" />
            </div>
            <!-- 关键字检索 -->
            <div class="search-box">
              <BaseInput placeholder="查询" />
            </div>
          </li>
        </ul>
        <!-- 列表 -->
        <ul class="list-wrap">
          <li class="item" v-for="item in roleList" :key="item.heroId">
            <img :src="item.icon" alt="" />
            <p>{{ item.name }}</p>
          </li>
        </ul>
      </template>
    </BaseBox>
  </div>
</template>

<script>
import { heroListAPI } from "@/api";
export default {
  name: "HeroView",
  data() {
    return {
      freeType: "",
      freeTabs: [
        {
          value: "",
          text: "全部",
        },
        {
          value: "0",
          text: "本周免费",
        },
      ],
      heroType: "",
      typeTabs: [
        {
          value: "",
          text: "全部",
        },
        {
          value: "fighter",
          text: "战士",
        },
        {
          value: "mage",
          text: "法师",
        },
        {
          value: "assassin",
          text: "刺客",
        },
        {
          value: "tank",
          text: "坦克",
        },
        {
          value: "marksman",
          text: "射手",
        },
        {
          value: "support",
          text: "辅助",
        },
      ],

      heroList: [],
    };
  },

  computed: {
    // 过滤本周免费和全部的计算属性
    resList() {
      // 如果freeType为''字符串则显示全部数组
      if (this.freeType == "") {
        return this.heroList;
      } else {
        // else 就显示 本周免费 的英雄，也就是说要根据 isweekfree 的值过滤出一个新数组
        // 所以直接跟这个值的状态过滤即可
        return this.heroList.filter((v) => v.isWeekFree == "1");
      }
    },

    // 过滤角色的计算属性
    roleList() {
      /*
      let list = this.resList;
      switch (this.heroType) {
        case "assassin":
          list = this.resList.filter((v) => v.roles.includes("assassin"));
          break;
        case "fighter":
          list = this.resList.filter((v) => v.roles.includes("fighter"));
          break;
        case "mage":
          list = this.resList.filter((v) => v.roles.includes("mage"));
          break;
        case "tank":
          list = this.resList.filter((v) => v.roles.includes("tank"));
          break;
        case "marksman":
          list = this.resList.filter((v) => v.roles.includes("marksman"));
          break;
        case "support":
          list = this.resList.filter((v) => v.roles.includes("support"));
          break;
      }
      */

     // 如果为空，代表选的是全部
      // if (this.heroType == "") {
      //   // 就是过滤出第一个大类的结果
      //   return this.resList;

      // } else {
      //   // 不是全部，就要根据你选中的职业过滤
      //   // 当this.heroType为mage，当this.heroType为support
      //   return this.resList.filter((v) => v.roles.includes(this.heroType));
      // }

      // 纯属娱乐
      return this.resList.filter((v) => v.roles.join('').indexOf(this.heroType) != -1);
    },
  },

  async created() {
    let res = await heroListAPI();
    this.heroList = res.data.data;
  },
};
</script>

<style lang="less" scoped>
.hoverShadow () {
  transition: all 0.5s;
  cursor: pointer;
  &:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  }
}
.hero-view {
  .filter-box {
    margin-bottom: 10px;
    background-color: #f0f2f5;
  }
  .filter-box li {
    display: flex;
    align-items: center;
    height: 50px;
    .base-tab {
      margin-right: 10px;
    }
    &:before {
      content: "综合";
      color: white;
      display: inline-block;
      text-align: center;
      line-height: 40px;
      width: 80px;
      height: 100%;
      background-color: #2c88e2;
      margin-right: 10px;
    }
    &:first-child:before {
      border-top-left-radius: 10px;
    }

    &:last-child {
      &:before {
        border-bottom-left-radius: 10px;
      }
    }
  }
  .list-wrap {
    display: flex;
    flex-wrap: wrap;
    padding-left: 20px;
    .item {
      height: 120px;
      width: 120px;
      margin-bottom: 30px;
      padding: 10px 15px 0;
      .hoverShadow();
      img {
        display: block;
        border: 2px solid #2c88e2;
        width: 100%;
      }
      p {
        text-align: center;
        font-size: 13px;
      }
    }
  }
}
</style>
